<template>
    <div ref="wrapper">
        <div class="content">
            <slot></slot>
        </div>
    </div>
</template>

<script>
    import BScrool from 'better-scroll'
    export default {
        data(){
            return {
                scroll:null
            }
        },
        props:{
            probeTyped:{
                type: Number,
                default:1
            },
            pullUpLoad:{
                type:Boolean,
                default:false
            }
        },
        updated(){
            this.refreshScroll()
        },
        mounted(){
                this.$nextTick(()=>{
                    // 创建Better-Scroll实例
                    this.scroll = new BScrool(this.$refs.wrapper,{
                    // 0,1不侦测，2只侦测手指滚动，3侦测所有滚动
                        probeType:this.probeTyped,
                        click:true,
                        pullUpLoad:this.pullUpLoad 
                     })  
                     //注册抛出滚动信息事件
                    if(this.probeTyped>1){
                        this.scroll.on('scroll',position=>{
                            this.$emit('pushPosition',position)
                        })
                    }
                    //注册抛出下拉到底的事件
                    if(this.pullUpLoad){
                        this.scroll.on("pullingUp",()=>{
                            this.$emit("pullUpLoad")
                        })
                    }
                })
        },
        methods:{
            scrollTo(x,y,delay = 300){
                // && 防止scroll未初始化时被调用
                this.scroll &&  this.scroll.scrollTo(x,y,delay)
            },
            finishPullUp(){
                this.scroll && this.scroll.finishPullUp()
            },
            refreshScroll(){
                this.scroll && this.scroll.refresh() 
            },
            getScrollY(){
                return this.scroll.y
            }
        }
    }
</script>

<style scoped>

</style>